<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 11:40:52
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-02 19:25:14
 * @FilePath: /nhw/src/components/Steps/index.vue
-->
<template>
  <div class="steps-container">
    <!-- 流程开始 -->
    <Step
      :headline="startNode ? startNode.nodeDesc : '【流程暂未启动】'"
      :time="startNode ? startNode.startTime : ''"
      :showCenter="show"
      :data="[
        {
          userName: startUserName,
          userAvatar: startUserAvatar,
          handleView: '',
        },
      ]"
    />
    <!-- 流程开始 -->
    <!-- 流程已完成 -->
    <template v-if="show && handledList.length > 0">
      <Step
        :key="'handledList' + index"
        v-for="(item, index) in handledList"
        :time="item.reachTime"
        :headline="item.nodeDesc"
        :data="item.handleInfos"
      />
    </template>
    <!-- 流程已完成 -->

    <!-- 流程进行中 -->
    <template v-if="show && handlingList.length > 0">
      <Step
        v-for="(item, index) in handlingList"
        :key="'handling' + index"
        :data="item.handleInfos"
        :headline="item.nodeDesc"
        :isEnd="handlingList.length <= 0"
        :class="item.infoType == 'notify' ? 'zhihui' : ''"
        :time="item.reachTime"
      />
    </template>
    <!-- 流程进行中 -->
    <!-- 流程结束 -->
    <Step v-if="state == '20'" headline="【流程结束】" />
    <!-- 流程结束 -->
  </div>
</template>

<script>
import Step from "./Step";
export default {
  name: "MySteps",

  components: { Step },

  props: {
    stepData: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {},
  data() {
    return {
      show: false,
      handledList: [],
      handlingList: [],
      startNode: {},
      startUserName: "",
      startUserAvatar: "",
      state: "",
    };
  },
  created() {
    if (this.stepData.startNode) {
      //流程是否开始 开始展示
      this.show = true;
    }
    this.state = this.stepData.state; // 20 流程结束 10 流程进行中
    this.handledList = this.stepData.handledList; // 完成的
    this.handlingList = this.stepData.handlingList; // 进行中
    this.startNode = this.stepData.startNode;
    this.startUserName = this.stepData.startUserName;
    this.startUserAvatar = this.stepData.startUserAvatar;
  },
};
</script>

<style lang="less" scoped>
.steps-container {
  .step-container {
    &.zhihui {
      /deep/ .step__circle-container {
        background: #d6d5ef !important;
      }
      /deep/ .info {
        background: #dcdbf5 !important;
        color: #fff !important;
      }
    }
  }
}
</style>